<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<link rel="apple-touch-icon" sizes="76x76" href="assets/img/apple-icon.png">
	<link rel="icon" type="image/png" sizes="96x96" href="assets/img/favicon.png">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

	<title></title>

	<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
    <meta name="viewport" content="width=device-width" />


    <!-- Bootstrap core CSS     -->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet" />

    <!-- Animation library for notifications   -->
    <link href="assets/css/animate.min.css" rel="stylesheet"/>

    <!--  Paper Dashboard core CSS    -->
    <link href="assets/css/paper-dashboard.css" rel="stylesheet"/>

    <!--  CSS for Demo Purpose, don't include it in your project     -->
    <link href="assets/css/demo.css" rel="stylesheet" />

    <!--  Fonts and icons     -->
    <!-- <link href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
    <link href='https://fonts.googleapis.com/css?family=Muli:400,300' rel='stylesheet' type='text/css'> -->
    <link href="assets/css/themify-icons.css" rel="stylesheet">

</head>
<body>

<div class="wrapper" id="app">
	<div class="sidebar" data-background-color="white" data-active-color="danger">

    <!--
		Tip 1: you can change the color of the sidebar's background using: data-background-color="white | black"
		Tip 2: you can change the color of the active button using the data-active-color="primary | info | success | warning | danger"
	-->

    <div class="sidebar-wrapper">
        <div class="logo">
            <a href="#" class="simple-text">
                宠物商品商店后台管理系统
            </a>
        </div>

        <ul class="nav">
            <li v-if="role===0||role===2">
                <a href="user.html">
                    <i class="ti-user"></i>
                    <p>用户管理</p>
                </a>
            </li>
            <li v-if="role===0">
                <a href="goods.html">
                    <i class="ti-shopping-cart-full"></i>
                    <p>商品管理</p>
                </a>
            </li>
            <li v-if="role===0||role===1">
                <a href="stock.html">
                    <i class="ti-truck"></i>
                    <p>商品库存管理</p>
                </a>
            </li>
            <li class="active" v-if="role===0">
                <a href="bill.html">
                    <i class="ti-clipboard"></i>
                    <p>账单管理</p>
                </a>
            </li>
            <li v-if="role===0||role===2">
                <a href="orders.html">
                    <i class="ti-file"></i>
                    <p>订单管理</p>
                </a>
            </li>
            <li v-if="role===0||role===2">
                <a href="message.html">
                    <i class="ti-comments"></i>
                    <p>留言管理</p>
                </a>
            </li>
            <li>
                <a href="../login.html">
                    <i class="ti-settings"></i>
                    <p>退出登录</p>
                </a>
            </li>
        </ul>
    </div>
    </div>

    <div class="main-panel">
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">账单管理</a>
                </div>
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li>
                            <a href="#">
                                <i class="ti-user"></i>
                                <p>{{userName}}</p>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>


        <div class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="header">
                                <h4 class="title">账单列表</h4>
                            </div>
<!--                            <div style="margin: 10px;">-->
<!--                                <form action="*" onsubmit="return false">-->
<!--                                    <div class="nav-search">-->
<!--                                        <div class="input-group">-->
<!--                                            <input type="text" class="form-control" v-model="account" style="float: left;width: 200px;margin-right: 5px;" placeholder="请输入...">-->
<!--                                            <button class="btn btn-info" @click="getList">搜索</button>-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                </form>-->
<!--                            </div>-->
                            <div class="content table-responsive table-full-width" style="height: 800px;overflow-y: scroll;">
                                <table class="table table-striped">
                                    <thead>
                                    <th>商品ID</th>
                                    <th>商品名称</th>
                                    <th>商品成本</th>
                                    <th>收入</th>
                                    <th>利润</th>
                                    </thead>
                                    <tbody>
                                    <tr v-for="(item,index) in selectList" :key="index">
                                        <td>{{item.id}}</td>
                                        <td>{{item.shopName}}</td>
                                        <td>{{item.money}}</td>
                                        <td>{{item.purchasePrice}}</td>
                                        <td>{{item.lirun}}</td>
                                    </tr>
                                    </tbody>
                                </table>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


</body>
<script src="assets/js/vue.min.js"></script>
    <!--   Core JS Files   -->
    <script src="assets/js/jquery-1.10.2.js" type="text/javascript"></script>
	<script src="assets/js/bootstrap.min.js" type="text/javascript"></script>

	<!--  Checkbox, Radio & Switch Plugins -->
	<script src="assets/js/bootstrap-checkbox-radio.js"></script>

	<!--  Charts Plugin -->
	<script src="assets/js/chartist.min.js"></script>

    <!--  Notifications Plugin    -->
    <script src="assets/js/bootstrap-notify.js"></script>

    <!--  Google Maps Plugin    -->
    <!---<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>--->

    <!-- Paper Dashboard Core javascript and methods for Demo purpose -->
	<script src="assets/js/paper-dashboard.js"></script>

	<!-- Paper Dashboard DEMO methods, don't include it in your project! -->
	<script src="assets/js/demo.js"></script>

<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                userName:'',
                role:'',
                selectList:[],
                page:1,
                size:9999999,
            }
        },
        mounted() {
            var userInfo = JSON.parse(sessionStorage.getItem('userInfo'));
            if(userInfo=="" || userInfo==null){
                alert("您还没有登录，请先登录后在进行操作！");
                window.location.href = '../login.html'
            };
            this.userName = userInfo.account
            this.role = userInfo.role
            this.getList()
        },
        methods: {
            getList(){
                const that = this
                $.ajax({
                    //几个参数需要注意一下
                    type: "POST", //方法类型
                    dataType: "json", //预期服务器返回的数据类型
                    url: "/orderList/orders",
                    contentType: 'application/json',
                    data: JSON.stringify({
                        "size": that.size,
                        "page": that.page,
                        "account": that.account
                    }),
                    success: function (data) {
                        that.selectList = data
                    },
                    error: function () {
                        alert("异常！");
                    }
                });
            },
        }
    })
</script>
</html>
